<template>
  <div class="suggestion nav">
    <van-nav-bar title="意见反馈" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="pl-30 pr-30 forms pt-40 leftLine">
      <input type="text" placeholder="请简短填写您要反馈问题的主题" v-model="info.title"/>
    </div>
    <div class="b_line ml-30 mr-30"></div>
    <textarea placeholder="请输入反馈内容" v-model="info.content"></textarea>
    <!-- <div class="pic pl-30">
      <div class="addPic"><img src="../../../public/images/addPic.png"/></div>
    </div> -->
    <div class="pic pl-30 addPic flex flex-wrap  pb-30">
      <img v-for="(item,index) in info.image" :key="index" :src="item" />
      <td-upload @upload-img="headPortrait"></td-upload>
    </div>
    <div class="pl-30 pr-30 forms mt-30 ">
      <input type="text" placeholder="您的联系方式" v-model="info.contact"/>
    </div>
    
    <van-button class="mt-30 ml-30 mr-30" type="primary" size="large" @click='sure'>提交</van-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      checked:true,
      info:{image:[]}
    }
  },
  methods:{
    headPortrait(e) {
      this.info.image.push(e);
    },
    sure(){
      console.log(this.info)
      if (!this.info.title) {
        this.$toast.fail("请输入标题");
        return;
      }
      if (!this.info.content) {
        this.$toast.fail("请输入内容");
        return;
      }
      if (!this.info.contact) {
        this.$toast.fail("请输入联系方式");
        return;
      }
      this.info.images=JSON.stringify(this.info.image);
      this.$post(this.$api.user.suggestion,this.info).then(data => {
        this.$toast.success({message:"提交成功",duration:500});
        this.$router.push({ path: "/person"});
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .suggestion{height: 100vh;background-color: #F5F5F5;}
  .forms{background-color: #fff;}
  .forms .name{width: 1rem;height: 0.6rem;border-radius: 0.29rem;font: 0.28rem/0.6rem '微软雅黑';text-align: center;background-color: #F5F5F5;margin-right: 0.3rem;}
  .forms input[type=text]{border: none;outline: none;color: #CCCCCC;font: 0.3rem/0.9rem '微软雅黑';display: block;width: 100%;margin-left: 0.1rem;}
  .leftLine{position: relative;}
  .leftLine::before{content: '';width: 0.04rem;height: 0.4rem;background-color: #4AACE9;position: absolute;left: 0.3rem;top: 0.65rem;}
  textarea{font: 0.3rem/0.4rem '微软雅黑';color: #CCCCCC;border: none;outline: none;height: 2rem;padding: 0.43rem;width:calc(100vw - 0.86rem);display:block;}
  .pic{background-color: #fff;}
  .addPic {
    /* height: 1.8rem; */
  }
  .addPic img {
    width: calc((100vw - 0.6rem - 0.2rem)/3);
    height: calc((100vw - 0.6rem - 0.2rem)/3);
    display: inline-block;
    /* margin-right: 0.2rem; */
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .addPic img:nth-of-type(3n){
    margin-right: 0;
  }
  input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-moz-placeholder,textarea::-webkit-input-placeholder { /* Mozilla Firefox 19+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-ms-input-placeholder,textarea::-webkit-input-placeholder { /* Internet Explorer 10+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }   
</style>
